<template>
    <div class="user-qx">
       <yh-dialog drag title="权限设置" :visible.sync="dialog" width="800px">
            <el-tabs type="border-card">
                <yh-tab-pane>
                    <span slot="label">
                        <i class="el-icon-tickets"></i>
                        用户管理
                    </span>
                    <div class="uers-tabs">
                        <el-tree :data="tabsData" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps">
                        </el-tree>
                    </div>
                </yh-tab-pane>
                <yh-tab-pane>
                    <span slot="label">
                        <i class="el-icon-tickets"></i>
                        产品权限
                    </span>
                    <div class="uers-list"></div>
                </yh-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialog = false">
                    取 消
                </el-button>
                <el-button size="mini" type="primary" @click="dialog = false">确 定 </el-button>
            </div>
       </yh-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Emit, Model, Prop, Vue, Watch } from 'vue-property-decorator';
@Component({
    name: 'PermissionList',
})
export default class PermissionList extends Vue {
    private tabsData: any;
    private defaultProps: any;

    @Prop({ type: Number })
    userCode!: number;

    @Prop({ type: Boolean })
    dialog!: boolean;

    @Watch('dialog')
    private onDialog(newValue: any) {
        console.log('newValue' + newValue);
    }

    @Model('dialogsss', { type: Boolean })
    showData: boolean;

    @Watch('dialogsss')
    private onDialogsss(newValue: any) {
        console.log('newValue' + newValue);
    }

    @Emit('on-dialog')
    onChangDialog(dialog: boolean) {
        console.log('zzzzzz' + this.dialog);
    }
}
</script>
<style lang="scss" scoped>
.user-qx {
    .el-tabs__content {
        padding: 1px;

        .el-tab-pane {
            color: #222;
        }
    }

    .uers-tabs {
        margin-top: 20px;
        height: 340px;
        overflow-y: auto;
    }
}
</style>
